<template>
  <div>
    <el-transfer
      @change="showParams"
      filterable
      :titles="['未选参数', '已选参数']"
      :filter-method="filterMethod"
      filter-placeholder="请输入关键词"
      v-model="valueParameters"
      :data="data"
      style="height: 250px; margin-left: 20%; padding-top: 50px"
    >
    </el-transfer>
    <ul class="paramsUl">
      <li>
        <!-- 选择时间组件  -->
        <div class="block">
          <el-date-picker
            style="margin-left: 10%; margin-top: 20px"
            v-model="valueTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </li>
      <li
        v-for="(item, index) in saveParams"
        :key="index"
        style="padding-top: 20px"
      >
        <div class="block" v-show="item.label == '浏览量'">
          <span>浏览量</span>
          <!-- 滑块组件 -->
          <el-slider
            v-model="valueViews"
            :max="maxViewsValue"
            style="
              width: 400px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 20px;
            "
            show-input
          >
          </el-slider>
        </div>
        <div class="block" v-show="item.label == '点赞量'">
          <span>点赞量</span>
          <!-- 滑块组件 -->
          <el-slider
            :max="maxLikeValue"
            v-model="valueLike"
            style="
              width: 400px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 20px;
            "
            show-input
          >
          </el-slider>
        </div>
        <div class="block" v-show="item.label == '收藏量'">
          <span>收藏量</span>
          <!-- 滑块组件 -->
          <el-slider
            :max="maxCollectValue"
            v-model="valueCollect"
            style="
              width: 400px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 20px;
            "
            show-input
          >
          </el-slider>
        </div>
        <div class="block" v-show="item.label == '评论量'">
          <span>评论量</span>
          <!-- 滑块组件 -->
          <el-slider
            :max="maxCommentValue"
            v-model="valueComment"
            style="
              width: 400px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 20px;
            "
            show-input
          >
          </el-slider>
        </div>
      </li>
      <li style="margin-top: 50px">
        <el-button plain style="margin-left: 25%" @click="uploadRules">
          提交规则
        </el-button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ExcellentBlogsRule",
  data() {
    // 穿梭框方法
    const generateData = () => {
      const data = [];
      const chooseParameters = ["点赞量", "浏览量", "收藏量", "评论量"]; //选择参数
      const keywords = ["点赞量", "浏览量", "收藏量", "评论量"]; //搜索关键字
      // 遍历选择参数并存入到data数组中
      chooseParameters.forEach((chooseParameters, index) => {
        data.push({
          label: chooseParameters,
          key: index,
          keywords: keywords[index],
        });
      });
      return data;
    };
    return {
      data: generateData(), //调用方法
      valueParameters: [], //存的是已选参数的下标
      // 过滤方法element固定写法
      filterMethod(query, item) {
        return item.keywords.indexOf(query) > -1;
      },
      valueViews: 0, //浏览量占比
      valueLike: 0, //点赞量占比
      valueCollect: 0, //收藏量占比
      valueComment: 0, //评论量占比
      saveParams: [], //存选择的参数
      excellentBlog: [], //优秀博客的博客数据
      // 选择时间element固定写法
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      valueTime: "", //选择的时间
      starValueTime: "", //开始时间
      endValueTime: "", //结束时间
    };
  },
  computed: {
    // 根据用户输入的值动态设置最大值
    // 浏览量的最大值
    maxViewsValue() {
      const maxViwsNum =
        100 - this.valueLike - this.valueCollect - this.valueComment;
      return maxViwsNum;
    },
    // 点赞量的最大值
    maxLikeValue() {
      const maxLikeNum =
        100 - this.valueViews - this.valueCollect - this.valueComment;
      return maxLikeNum;
    },
    // 收藏量的最大值
    maxCollectValue() {
      const maxCollectNum =
        100 - this.valueViews - this.valueLike - this.valueComment;
      return maxCollectNum;
    },
    // 评论量的最大值
    maxCommentValue() {
      const maxCommentNum =
        100 - this.valueViews - this.valueCollect - this.valueLike;
      return maxCommentNum;
    },
  },

  methods: {
    // 将选择的参数存入到saveParams中方便传递
    showParams() {
      this.saveParams = [];
      for (var i = 0; i < this.valueParameters.length; i++) {
        this.saveParams.push(this.data[this.valueParameters[i]]);
      }
    },
    // 上传规则
    uploadRules() {
      // 获取时间
      this.starValueTime = this.valueTime[0];
      this.endValueTime = this.valueTime[1];

      // 四个参数的占比加起来要到100
      if (
        this.valueViews +
          this.valueLike +
          this.valueCollect +
          this.valueComment ==
        100
      ) {
        // 调用接口传参
        if (this.valueTime) {
          this.$http({
            method: "post",
            url: "jurisdiction/selectGoodBlog",
            params: {
              viewNumber: this.valueViews,
              likeNumber: this.valueLike,
              collectionNumber: this.valueCollect,
              commentNumber: this.valueComment,
              startTime: this.starValueTime,
              endTime: this.endValueTime,
            },
          }).then(({ data }) => {
            console.log("博客之星", data);
            if (data.flag) {
              // 提示信息
              this.$message.success("规则上传成功!");
              this.$router.push({
                name: "ExcellentBlogsListChoose",
              });
              this.excellentBlog = data.data;
            } else {
              this.$message.error("该时间段内没有发布的博客!");
            }
          });
        } else {
          this.$message({
            type: "error",
            message: "请选择时间",
          });
        }
      } else {
        this.$message({
          type: "error",
          message: "所选参数须达到100%",
        });
      }
    },
  },
};
</script>

<style scoped>
.paramsUl {
  margin-left: 25%;
  margin-top: 20px;
  padding-bottom: 50px;
}
</style>